<template>
  <div class="hello">
   <div>{{msg}}</div>
  <!--  <input v-model="newTodo"><span @click="addTodo({text: newTodo})">Add</span>
   <div v-for = "todo in $store.state.todos">
      {{todo.text}}
      <span @click="deleteTodo(todo)">x</span>
   </div> -->
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'To do list',
      newTodo: ''
    }
  },
  methods: {
    // ...mapMutations([
    //   'addTodo',
    //   'deleteTodo',
    //   'toggleTodo',
    //   'editTodo',
    //   'toggleAll',
    //   'clearCompleted'
    // ])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  transition: all .3s ease-in-out;
  position: absolute;
    top: 450px;
    left: 0;
    width: 100%;
}
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
